<template>
  <div style="display: flex;flex-direction: column">
    <!-- 头部区域 -->
    <div style="height: 60px;background-color:blue;width: 100%;display: flex">
      <span style="font-size: 20px;color: white;height: 100%;display: flex;align-items: center;margin-left: 100px">欢迎使用后台管理系统</span>
      <div style="flex: 1"></div>
      <div style="height: 100%;display: flex;align-items: center;margin-right: 100px">
        <span style="font-size: 20px;color: white;margin-right: 20px">赵烺越</span>
        <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.GUvp6Bvtr1p9Zgbgw9xbNwHaHJ?w=209&h=211&c=8&rs=1&qlt=90&o=6&dpr=2.9&pid=3.1&rm=2"
             style="width: 40px;height: 40px;border-radius: 40px">
      </div>
    </div>
    <!-- 头部区域结束 -->

    <!-- 内容区域 -->
    <div style="width: 100vw;height: calc(100vh - 60px);display: flex">
      <!-- 左边布局 -->
      <el-menu
          style="width: 200px;height: 100%"
          class="el-menu-vertical-demo"
          router
          :default-active="activeMenu"
      >
        <el-menu-item index="/manager/systemHome">
          <el-icon><Platform /></el-icon>
          系统首页</el-menu-item>
        <el-menu-item index="/manager/home">
          <el-icon><BellFilled /></el-icon>
          信息管理</el-menu-item>
        <el-menu-item index="/manager/book">
          <el-icon><Management /></el-icon>
          图书管理</el-menu-item>

        <!--        二级菜单-->
        <el-sub-menu>
          <template #title>
            <el-icon><location /></el-icon>
            <span>信息分类</span>
          </template>
          <el-menu-item index="/manager/book">学生列表</el-menu-item>
          <el-menu-item index="/manager/info">教师列表</el-menu-item>
        </el-sub-menu>
      </el-menu>

      <!-- 右边内容区域 -->
      <div style="height: 100%;flex: 1">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>

<script setup>
//路由管理
import {computed} from "vue";
import {useRoute} from "vue-router";
import {BellFilled, Location, Management, Platform} from "@element-plus/icons-vue";

//路由跳转
//获取当前路由信息
const route = useRoute();
//
const activeMenu= computed(() => {
  return route.path
})
</script>

<style scoped>
</style>